*{
    margin: 0;
    padding: 0;
    font-family: Microsoft YaHei UI;
    border: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  } 
a {
    text-decoration: none;
}
li{
   list-style: none;
}
/* 头部 */
header {
    width: 100%;
    height: 80px;
    background-color: #07cbc9;
    line-height: 80px;
}

header > a {
    display: block;
    float: left;
    height: 100%;
}
header > a > img {
    padding: 15px 0px 0px 150px;
}

header > nav{
    float: right;
    margin-right: 100px;
}
header > nav > a{
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
}
header > nav > a:hover{
    background-color: #000;
}
/* banner区 */
.banner{
    position: relative;
    height: 600px;
}
.banner > img {
    width: 100%;
    height: 100%;
}
.banner::before{
    position: absolute; 
    content: ''; 
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.2); 
    width: 100%;
    height: 100%;
}
.banner > div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -255px;
    margin-top: -185px;
    width: 510px;
    height: 371px;
    text-align: center;
}
.banner > div > input,.banner > div > textarea,.banner > div > button{
    border: 2px solid rgb(128, 128, 128);
    background-color: transparent;
    border-radius: 5px;
    outline: none;
}

.banner > div > input{
    width: 505px;
    height: 39px;
    margin-bottom: 20px;
    color: #fff;
}
.banner > div > input:hover{
    border:2px solid #07cbc9;
}
.banner > div > textarea {
    width: 505px;
    height: 115px;
    color: #fff;
    margin-bottom: 20px;
}
.banner > div > textarea:hover{
    border:2px solid #07cbc9;
}
.banner > div > button{
    width: 123px;
    height: 39px;
    color: rgb(179,182,178);
    font-weight: bold;
}
.banner > div > button:hover{
    border:none;
    background-color: #07cbc9;
    color: #000;
}
/* ABOUT区 */
.about .top {
    width: 100%;
    height: 600px;
    margin-top: 60px;
}
.about .top .title {
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
.about .top h1 {
    font-size: 50px;
}
.about .top hr {
    width: 40px;
    border: 1px solid #07cbc9;
}
.about .top .title > hr {
    margin: 20px auto;
}
.about .top .title > p{
    color: #807E81;
}
.about .top .content {
    position: relative;
    width: 1080px;
    margin: 30px auto;
}
/* .about .top .content::before {
    position: absolute;
    content: '';
    top: 99px;
    width: 374px;
    height: 250px;
    z-index: 1;
    background-color: rgba(0,0,0,.1);
} */
.about .top .content h2 {
    width: 200px;
    font-size: 35px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 8px;
}
.about .top .content img {
    position: absolute;
    top: 0;
    left: 230px;
    width: 570px;
    /* z-index: 1; */
}
.about .top .content .first{
    position: absolute;
    z-index: 2;
    width: 373px;
    height: 250px;
    background-color: rgba(0,0,0,.0);
    border: 1px solid rgb(200,200,200);
}
.about .top .content .first p {
    margin: 20px;
    line-height: 28px;
}
.about .top .content .first button {
    width: 102px;
    height: 43px;
    margin-left: 20px;
    background-color: #000;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
}
.about .top .content .first button:hover{
    background-color: rgba(0,0,0,.0);
    color: #000;
    border:1px solid #000;
}
.about .top .content .second,.about .top .content .third {
    width: 240px;
    height: 145px;
    border: 1px solid #07cbc9;
    text-align: center;
}

.about .top .content .second {
    position: absolute;
    top: 0;
    right: 5px;
}
.about .top .content .third {
    position: absolute;
    top: 175px;
    right: 5px;
}
.about .top .content .second h3,.about .top .content .third h3{
    font-size: 35px;
    font-weight: bold;
    margin-top: 20px;
}
.about .top .content .second h4,.about .top .content .third h4{
    font-size: 20px;
    font-weight: normal;
}
.about .top .content .second hr,.about .top .content .third hr {
    margin: 15px auto;
}
.about .bottom {
    width: 100%;
    height: 792px;
    margin-top: 70px;
}
.about .bottom ul{
    width: 100%;
    height: 100%;
}
.about .bottom ul li {
    float: left;
    width: 25%;
    height: 50%;
}
.about .bottom ul img {
    width: 100%;
    height: 100%;
}
.about .bottom ul .article{
    background-color: #07cbc9;
}
.about .bottom ul .article h3{
    margin: 30px 0 25px 40px;
    font-weight: normal;
    font-size: 30px;
    color: #fff;
}
.about .bottom ul .article p{
    font-size: 18px;
    margin: 0 30px 25px 40px;
    color: #fff;
}
.about .bottom ul .article .more {
    font-size: 15px;
    color: rgb(208,217,213);
}
.about .bottom ul .article button {
    width: 102px;
    height: 43px;
    background-color: #000;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    margin: 30px 0 0 190px;
}
.about .bottom ul .article button:hover{
    background-color: rgba(0,0,0,.0);
    border: 1px solid #000;
}
/* gallery区 */
.gallery {
    width: 100%;
    margin-top: 60px;
    text-align: center;
}
.gallery h1 {
    font-size: 50px;
}
.gallery hr {
    width: 40px;
    border: 1px solid #07cbc9;
    margin: 20px auto;
}
.gallery p{
    width: 500px;
    color: #807E81;
    margin: 0 auto;
}
.gallery ul {
    width: 1170px;
    margin:40px auto;
}
.gallery ul li{
    float: left;
    height: 304px;
    margin: 0px 30px 30px 0;
}
.gallery ul li img {
    vertical-align: middle;
}
.gallery ul li h6{
    height: 64px;
    background-color: #000;
    color: #fff;
    text-align: left;
    line-height: 64px;
    font-weight: normal;
    font-size: 15px;
    padding-left: 15px;
}
footer {
    width: 100%;
    height: 80px;
    background-color: #07cbc9;
    text-align: center;
    line-height: 80px;
    color: #fff;
    margin-top: 30px;
}
